<!-- 列表组件 -->
<template>
  <div class="flex-full">
    <el-table
      ref="table"
      stripe
      border
      :data="porpData.data"
      @selection-change="handleSelectionChange"
    >
      <el-table-column
        v-if="porpData.isCheck"
        type="selection"
        width="50"
      ></el-table-column>
      <el-table-column
        v-for="(item, index) in porpData.config"
        :key="index"
        :prop="item.prop"
        :label="item.label"
        :width="item.width"
        show-overflow-tooltip
      >
        <template slot-scope="scope">
          <span v-if="item.type === 'string'">
            {{ scope.row[item.prop] }}
          </span>
          <span v-if="item.type === 'button'">
            <el-button
              size="small"
              class="btn"
              v-for="(buttonItem, index) in scope.row[item.prop]"
              :key="index"
              :title="buttonItem.name"
              :type="buttonItem.type"
              :icon="buttonItem.icon"
              :class="buttonItem.class || 'info-btn'"
              @click="operateFun(buttonItem.type, scope.row)"
            >
              {{ buttonItem.name }}
            </el-button>
          </span>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
      background
      @current-change="handlePageChange"
      current-page.sync="porpData.currentPage"
      :page-size="porpData.pageSize"
      :pager-count="5"
      layout="prev, pager, next"
      :total="porpData.total"
    ></el-pagination>
  </div>
</template>

<script lang="ts">
import { Component, Emit, Prop, Vue } from 'vue-property-decorator';

@Component
export default class ListTable extends Vue {
  // 选中
  private selectedData: any = [];
  @Prop()
  private porpData: any;

  // 表格向父组件传值
  @Emit('tableCallback')
  private operateBtnClick(type: any, curVal?: any, passVal?: any) {
    return { type, curVal, passVal };
  }

  // 翻页
  private handlePageChange(val: any) {
    this.operateBtnClick('handlePageChange', val);
  }

  // 操作按钮
  private operateFun(operateName: any, curRow: any) {
    this.operateBtnClick(operateName, curRow);
  }

  private handleSelectionChange(val: any) {
    if (this.porpData.isSingleSelect) {
      if (val.length === 0) {
        this.operateBtnClick('trSelectChange', []);
      } else {
        const curRow = val.slice(val.length - 1, val.length)[0];
        if (val.length > 1) {
          (this.$refs.table as any).toggleRowSelection(val[0], false);
        }
        (this.$refs.table as any).toggleRowSelection(curRow, true);
        this.operateBtnClick('trSelectChange', [curRow]);
      }
    } else {
      this.operateBtnClick('trSelectChange', val);
    }
  }
}
</script>

<style scoped lang="less"></style>
